require('normalize.css/normalize.css');
require('styles/App.scss');

import React from 'react';
import ReactDOM from 'react-dom';

import uitl from '../util/util.js'
import ImgFigure from './pictrue'
import ControllerUnit from './handle'

let imageDataArr = require('../imageData/imagesData.json');
let imageData = (function () {
	for (let i = 0; i < imageDataArr.length; i++) {
		let singeImage = imageDataArr[i];
		singeImage.fileUrl = require('../images/' + singeImage.fileName);
		imageDataArr[i] = singeImage;
	}
	return imageDataArr;
})(imageDataArr);


class AppComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			imgsArrangeArr: []
			/*
			 {
				 pos: {
					 left: '0',
					 top: '0'
				 },
				 rotate: 0,  // 图片旋转角度
				 isInverse: false   // 设置图片政府面
				 isCenter: false    //判断是否是中心图片
			 }
			 */

		};
		this.canstant = {
			centerPos: {
				left: '100px',
				right: 0
			},
			hPosRange: { //水平方向取值范围
				leftSecX: [0, 0],
				rightSecX: [0, 0],
				y: [0, 0]
			},
			vPosRange: { //水平方向取值范围
				x: [0, 0],
				topY: [0, 0]
			}
		}

	}

	// 初始化位置信息
	reArrange(centerEle) {
		let imgsArrangeArr = this.state.imgsArrangeArr,
			canstant = this.canstant,
			centerPos = canstant.centerPos,
			hPosRange = canstant.hPosRange,
			vPosRange = canstant.vPosRange,
			hPosRangeLeftSecX = hPosRange.leftSecX,
			hPosRangeRightSecX = hPosRange.rightSecX,
			hPosRangeY = hPosRange.y,
			vPosRangeTopY = vPosRange.topY,
			vPosRangeTopX = vPosRange.x,

			imgsArrangTopArr = [],
			topImgNum = Math.ceil(Math.random() * 2), //取一个或不取
			topImgSpliceIndex = 0,  //
			imgArrangeCenterArr = imgsArrangeArr.splice(centerEle, 1);  //踢出位于中心位置的图片，返回中心图片的数组

		// 首先居中的图片
			imgArrangeCenterArr[0].pos = centerPos;
			imgArrangeCenterArr[0].rotate = 0;
			imgArrangeCenterArr[0].isCenter = true;
		// 位于顶部图片信息
			topImgSpliceIndex = Math.ceil(Math.random() * (imgsArrangeArr.length - topImgNum));
			imgsArrangTopArr = imgsArrangeArr.splice(topImgSpliceIndex, topImgNum);
		// bu ju shang ce
		    imgsArrangTopArr.forEach(function (value, index) {
			imgsArrangTopArr[index] = {
				pos: {
					top: uitl.getRangeRandom(vPosRangeTopY[0], vPosRangeTopY[1]) + 'px',
					left: uitl.getRangeRandom(vPosRangeTopX[0], vPosRangeTopX[1]) + 'px'
				},
				rotate: uitl.getRotateRandomDeg(30),
				isCenter: false
			}
		});
		//  left and right


		for (var i = 0, j = imgsArrangeArr.length, k = j / 2; i < j; i++) {
			var hPosRangeLorX = null;
			if (i < k) {
				hPosRangeLorX = hPosRangeLeftSecX;
			} else {
				hPosRangeLorX = hPosRangeRightSecX
			}
			imgsArrangeArr[i] = {
				pos: {
					top: uitl.getRangeRandom(hPosRangeY[0], hPosRangeY[1]) + 'px',
					left: uitl.getRangeRandom(hPosRangeLorX[0], hPosRangeLorX[1]) + 'px'
				},
				rotate: uitl.getRotateRandomDeg(40),
				isCenter: false
			}
		}
		if (imgsArrangTopArr && imgsArrangeArr[0]) {
			imgsArrangeArr.splice(topImgSpliceIndex, 0, imgsArrangTopArr[0]);
		}
		imgsArrangeArr.splice(centerEle, 0, imgArrangeCenterArr[0]);
		uitl.log(imgsArrangeArr);
		this.setState({imgsArrangeArr: imgsArrangeArr});


	}

;

	componentDidMount() {
		let canstant = this.canstant;
		// 获取舞台节点的 宽高
		let stageDom = ReactDOM.findDOMNode(this.refs.stageDom),
			stageW = stageDom.scrollWidth,
			stageH = stageDom.scrollHeight,
			halfStageW = Math.ceil(stageW / 2),
			halfStageH = Math.ceil(stageH / 2);
		let imgDom = ReactDOM.findDOMNode(this.refs.imgBox0),
			imgW = imgDom.scrollWidth,
			imgH = imgDom.scrollHeight,
			halfImgW = Math.ceil(imgW / 2),
			halfImgH = Math.ceil(imgH / 2);
			canstant.centerPos = {
				left: (halfStageW - halfImgW) + 'px',
				top: (halfStageH - halfImgH) + 'px'
			};
		// 计算左右侧图片排布位置范围
			canstant.hPosRange.leftSecX[0] = -halfImgW;
			canstant.hPosRange.leftSecX[1] = halfStageW - halfImgW * 3;
			canstant.hPosRange.rightSecX[0] = halfStageW + halfImgW;
			canstant.hPosRange.rightSecX[1] = stageW - halfImgW;
			canstant.hPosRange.y[0] = -halfImgH;
			canstant.hPosRange.y[1] = stageH - halfImgH;

		// 计算上下侧图片排布位置范围
			canstant.vPosRange.topY[0] = -halfImgH;
			canstant.vPosRange.topY[1] = halfStageH - halfImgH * 3;

			canstant.vPosRange.x[0] = halfStageW - imgW;
			canstant.vPosRange.x[1] = halfStageW;

		    //初始化第一张图片居中
			this.reArrange(0);
	}

	/*
	 * 翻转图片
	 * @param index 输入当前被执行inverse操作的图片对应图片信息数组的index值
	 * return {Function}  这是一个闭包函数其内return一个真正待执行的函数
	 * */
	inserver(index) {
		return function () {
			let imgsArrangeArr = this.state.imgsArrangeArr;
			imgsArrangeArr[index].isInverse = !imgsArrangeArr[index].isInverse;
			this.setState({imgsArrangeArr: imgsArrangeArr});
		}.bind(this);
	}

	/*
	 * 点击图片居中
	 * @param index 输入当前被执行居中操作的图片对应图片信息数组的index值
	 * return {Function}  这是一个闭包函数其内return一个真正待执行的函数
	 * */
	center(index) {
		return function () {
			this.reArrange(index);
		}.bind(this)
	}

	render() {
		let imgList = [];
		let navList = [];

		imageData.forEach(function (val, index) {
			if (!this.state.imgsArrangeArr[index]) {
				this.state.imgsArrangeArr[index] = {
					pos: {
						left: '100px',
						top: 0
					},
					rotate: 0,
					isInverse: false
				}
			};

			imgList.push(<ImgFigure key={index}
									arrange={this.state.imgsArrangeArr[index]}
									data={val}
									center={this.center(index)}
									inserver={this.inserver(index)} ref={'imgBox' + index}/>);
			navList.push(<ControllerUnit key={index} arrange={this.state.imgsArrangeArr[index]}
										 inserver={this.inserver(index)}
										 center={this.center(index)}/>)
		}.bind(this));
		return (
			<section className="stage">
				<section className="img-sec" ref='stageDom'>
					{imgList}
				</section>
				<nav className="controller-nav">
					{navList}
				</nav>
			</section>
		);
	}
}

AppComponent.defaultProps = {};

export default AppComponent;
